<template>
  <div class="myMenu" id="myMenu">
    <ul>
      <li
          v-for="item in val"
          :key="item"
          :class="activeClass === item ? 'active':''"
          @mouseover="mouseover($event,item)"
      >
        <router-link to>
          <slot :name="item"></slot>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MallMenu",
  props: {
    val: {
      type: Number, // 数字 // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return 0;
      }
    },
    caid: {
      type: Number, // 对象 // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return null;
      }
    }
  },
  data() {
    return {
      activeClass: this.val,
    };
  },
  /**
   * @计算数据
   * */
  computed: {
    /**
     * @通用函数
     * */
    helper() {
      return this.$helper;
    },
    /**
     * @全局变量
     * */
    state() {
      return this.$store.state;
    }
  },
  methods: {
    // 通过mouseover事件控制当前显示的商品分类，1为该类别的热门商品
    mouseover(e, val) {
      //console.log(val);
      this.activeClass = val;
    }
  },
  watch: {
    // 向父组件传过去当前要显示的商品分类，从而更新商品列表
    activeClass: function (val) {
      let _this = this;
      let list = [];
      let data;
      if (this.caid===null) {
        data = {
          "page": 1,
          "pageSize": 10,
          "sortType": 1,
          "sortBy": val,
          "state":1,
        };
      } else {
        data = {
          "page": 1,
          "pageSize": 10,
          "sortType": 1,
          "sortBy": val,
          "card.caid": this.caid,
          "state":1,
        };
      }
      this.$axios.post(this.$store.state.baseURL + 'client/' + this.state.controller.Goods + '/query?' + 'OperatorId=1',
          data)
          .then(res => {
            list = res.data.goodsVoList;
            this.$emit("fromChild", list);
            //console.log(res.data);
          })
    }
  }
}
</script>

<style scoped>
#myMenu li {
  float: left;
  margin-left: 30px;
}

#myMenu a:hover {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}

#myMenu .active a {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}
</style>